<template>
  <Card>
    <span style="font-weight: bold;font-size:18px;font-family: 微软雅黑;">还款参数</span>
    <Form ref="formDatas" :model="formDatas"  style="width:1000px;margin:0px auto">
      <Row type="flex" align="middle" class="row-style">
        <Col span="3" class="row-col-style3">机构:</Col>
        <Col span="12" class="row-col-style2">
        <FormItem label="" inline class="form-style" prop="organization">
          <Select v-model="formDatas.organization" v-if="type==1||type==0">
            <Option v-for="item in orgList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span v-text="getOptionValue(orgList,formDatas.organization)" v-if="type==2"></span>
        </FormItem>
        </Col>
        <Col span="3" class="row-col-style3">描述:</Col>
        <Col span="6" class="row-col-style2">
        <FormItem label="" prop="paymentSequenceName" class="form-style" >
          <Input v-model="formDatas.paymentSequenceName" v-if="type==1||type==0" placeholder="请输入"></Input>
          <span v-text="formDatas.paymentSequenceName" v-if="type==2"></span>
        </FormItem>
        </Col>
      </Row>
      <!--表格表单-->
      <Table :columns="columns1" border :data="data1"></Table>
      </br>

      <Card>
        <Row v-if="type==1||type==0" style="text-align: center">
          <Button type="primary" @click="saveOrUpdate()">确定</Button>
          <Button type="primary" @click=resetForm>重置</Button>
          <Button type="primary" @click="handleGoBack">返回</Button>
        </Row>
        <Row v-else style="text-align: center">
          <Button type="primary" v-show="formDatas.status == 9 " @click="changeTypeToEdit()">编辑</Button>
          <Button type="primary" @click="deleteBykey">删除</Button>
          <Button type="primary" @click="handleGoBack">返回</Button>
        </Row>
      </Card>
    </Form>
  </Card>
</template>
<script>
export default {
  data () {
    return {
      // 封装还款参数实体对象
      formDatas: {
        itemList: [], // 存储余额类型优先级配置信息
        paymentSequenceCode: '',
        paymentSequenceName: '',
        organization: '100',
        status: null
      },
      templateData1: [],
      defaultFormData: {},
      defaultListData: [],
      columns1: [{
        type: 'index',
        align: 'center',
        title: '序号'
      },
      {
        title: '余额类型',
        align: 'center',
        key: 'fieldName'
      },
      {
        title: '优先级',
        align: 'center',
        render: (h, param) => {
          var vm = this
          if (vm.type === 2) {
            return h('div', param.row.sort)
          }
          return h('Input', {
            style: {
              fontSize: '12px',
              marginLeft: '5px',
              width: '100px'
            },
            props: {
              value: vm.templateData1[param.index].sort
            },
            on: {
              'on-change': e => {
                vm.templateData1[param.index].sort = e.target.value
              }
            },
            domProps: {
              value: param.row.sort,
              placeholder: '请输入数字，数字越小优先级越高'
            }
          }, '')
        }
      }
      ],

      data1: [

      ],

      ruleInline: {
        paymentSequenceName: [{
          required: true,
          message: '描述不能为空',
          trigger: 'blur'
        }]
      },

      orgList: [{
        value: '100',
        label: '消费金融'
      }],

      type: 0 // 0 新增  1 编辑   2 查看
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    // 页面初始化
    this.initPage()
  },
  computed: {
    // 实体对象主键
    index () {
      return this.$route.query.index
    }

  },
  mounted () {

  },
  methods: {
    trim (str) {
      var reg = /^[-+]?\d+$/
      return !reg.test(str.trim())
    },
    isNotNum (num) {

    },
    // 返回上一页
    handleGoBack () {
      this.$router.back()
    },

    handleRouterGo (path) {
      this.$router.push(path)
    },

    // 通用获取下拉框的文本信息
    getOptionValue (optionArray, keyValue) {
      for (var i = 0; i < optionArray.length; i++) {
        if (optionArray[i].value === keyValue) {
          return optionArray[i].label
        }
      }
      return ''
    },

    saveOrUpdate () {
      var vm = this
      // 提交前要校验必须是数字
      if (vm.formDatas.paymentSequenceName.length > 30) {
        this.$Message.warning('描述输入过长')
        return
      }
      for (var i = 0; i < vm.templateData1.length; i++) {
        var item = vm.templateData1[i]
        if (isNaN(item.sort) || vm.trim(item.sort + '')) {
          this.$Message.warning(item.fieldName + '的优先级不能为非数字')
          return
        }
        if (item.sort.length > 3) {
          this.$Message.warning(item.fieldName + '的值过长')
          return
        }
      }

      vm.formDatas.itemList = vm.templateData1

      var params = vm.formDatas
      if (vm.type === 1) {
        // 更新
        this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/paySequence/service/update', params).then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          this.$Message.success('更新成功')
          // 返回列表页
          vm.$router.push({
            name: 'paySequece'
          })
        }).catch(er => {

        })
      } else {
        this.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/paySequence/service/save', params).then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          this.$Message.success('添加成功')
          // 返回列表页
          vm.$router.push({
            name: 'paySequece'
          })
        }).catch(er => {
        })
      }
    },

    changeTypeToEdit () {
      this.type = 1
    },

    initPage () {
      const vm = this
      this.type = this.$route.query.type
      // 初始化表格数据
      this.$ajax.get(vm.$appContext.marvels_core_product + '/product/param/paySequence/service/initInfo').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.data1 = data.data
        vm.defaultListData = JSON.parse(JSON.stringify(vm.data1))
        vm.templateData1 = JSON.parse(JSON.stringify(vm.data1))
      }).catch(er => {

      })
      if (this.type === 1 || this.type === 2) {
        vm.$ajax.get(vm.$appContext.marvels_core_product + 'product/param/paySequence/service/getKey/' + vm.index).then(re => {
          var data = re.data
          vm.formDatas = data.data
          this.defaultFormData = JSON.parse(JSON.stringify(vm.formDatas))
          vm.data1 = data.data.itemList
          vm.defaultListData = JSON.parse(JSON.stringify(vm.data1))
          vm.templateData1 = JSON.parse(JSON.stringify(vm.data1))
        }).catch(er => {

        })
      }
    },
    deleteBykey () {
      var param = {
        paymentSequenceId: this.$route.query.index
      }
      this.$ajax.post(this.$appContext.marvels_core_product + '/product/param/paySequence/service/delete', param).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code === 'success') {
          this.$Message.success(message)
        } else {
          this.$Message.warn(data.data)
        }
        // 返回列表页
        this.$router.push({
          name: 'lateFee'
        })
      }).catch(er => {
      })
    },
    resetForm () {
      this.formDatas = JSON.parse(JSON.stringify(this.defaultFormData))
      this.data1 = JSON.parse(JSON.stringify(this.defaultListData))
      this.templateData1 = JSON.parse(JSON.stringify(this.defaultListData))
    }
  },
  props: {},
  watch: {
    // $route(val) {}
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
.row-col-style {
  color: #2d8cf0;
  font-family: 微软雅黑;
  font-size: 20px;
  text-align: right;
}
.row-col-style3 {
  text-align: left;
}
.row-col-style2 {
}
.form-style {
  width: 248px;
}
.ivu-form-item {
  margin-bottom: 0px;
}
.row-style {
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
